<template>
<div>
  <el-form ref="form" :model="arr" label-width="80px">
    <el-form-item label="模糊查询">
      <el-input v-model="arr.name"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

  <el-form ref="form" :model="tableData" label-width="80px" style="margin-top: 20px;margin-left: -45px" >
    <el-form-item>
      <el-button icon="el-icon-plus" size="small" @click="add">新增角色</el-button>
    </el-form-item>
  </el-form>






    <el-table :data="tableData" style="width: 96%;margin-left: 2%">
      <el-table-column label="角色名" width="180" >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注  " width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="入库时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.mrowTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>



    <el-dialog :title=this.title :visible.sync="dialogFormVisible">
      <el-form :model="sysrole">
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input v-model="sysrole.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="sysrole.remark" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item label="入库时间" :label-width="formLabelWidth">-->
<!--          <el-input v-model="sysrole.mrowTime" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPopulation">确 定</el-button>




      </el-form>


    </el-dialog>



  <el-dialog :title=this.title1 :visible.sync="dialogFormVisible1">
    <el-form :model="plot">
      <el-form-item label="角色名" :label-width="formLabelWidth">
        <el-input v-model="plot.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="plot.remark" autocomplete="off"></el-input>
      </el-form-item>

<!--      <el-form-item label="入库时间" :label-width="formLabelWidth">-->
<!--        <el-input v-model="plot.mrowTime" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="updatePopulation">确 定</el-button>




    </el-form>


  </el-dialog>

</div>
</template>

<script>



import {findSysRoleList, add, delSysRole, updateSysRole} from "@/api/community/sysrole";


export default {


  data() {
    //这里存放数据"

    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      tableData:[],
      sysrole:{},
      plot:{},
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible1: false,
      title:'新增',
      title1:'编辑',
      arr:{
        name:''
      },
      aa:0,
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",

  methods: {
    handleEdit(val){

      this.dialogFormVisible1=true
      this.aa=val.id;

    },
    updatePopulation(){
      updateSysRole(this.aa).then(
        res => {
          this.$message.success(res.msg)
          this.dialogFormVisible1=false
          this.list()
        }
      )
    },



    handleDelete(val){
      delSysRole(val.id).then(
        res => {
          this.$message.success(res.msg)
          this.list()
        }
      )
    },
    addPopulation(){
        add(this.sysrole).then(
          res => {
            this.$message.success(res.msg)
            this.dialogFormVisible=false
            this.list()
          }
        )
    },
    list(){
      findSysRoleList(this.arr.name).then(
        res => {
          this.tableData = res.data
        }
      )
    },

    add(){
      this.dialogFormVisible=true

    },
    onSubmit(){
      this.list();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.list();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
<style>
/* 如果需要，可以添加以下CSS到您的样式表中 */
.card-wrapper {
  /* 可以添加一些额外的样式来控制卡片的间距或布局 */
}

.custom-card .card-header {
  /* 根据需要自定义标题区域的样式 */
  padding: 10px; /* 根据实际情况调整 */
}

.custom-card .card-header .card-title {
  /* 小区名字和地址的容器样式 */
  display: flex;
  flex-direction: column; /* 使名字和地址垂直排列 */
}

.custom-card .card-header .card-image {
  /* 图片的容器样式，这里主要为了演示，实际上图片已经在HTML中直接设置了样式 */
}

.custom-card .card-body {
  /* 详细信息区域的样式 */
  padding: 10px; /* 根据实际情况调整 */

}
</style>
